<template>
	<section class="flow-detail-container">
		<template v-if="!(modelFlowInst && modelFlowInst.flowInstanceId)">
			<div class="flow-empty-detail-box">
				<a-empty></a-empty>
			</div>
		</template>
		<template v-else>
			<div class="flow-detail-box">
				<!-- 流程时间线 -->
				<div class="flow-box">
					<a-timeline mode="left" labelPosition="relative">
						<template v-for="node in flowNodes">
							<a-timeline-item :line-color="node.isHighlight? '#f40303' : '#bbc5db'">
								<template #dot>
									<!-- <IconCheck class="node-dot" :style="{ backgroundColor: '#e8f3ff' }" /> -->
									<div class="assignee-container">
										<template v-if="NODE.COPY == node.nodeType">
											<a-avatar :size="36" style="font-size: 400px;background: #fff;color: #3296fa;" class="iconfont-approval-admin"><span v-html="icons[NODE.COPY].icon"></span></a-avatar>
										</template>
										<template v-else-if="NODE.APPROVE == node.nodeType">
											<a-avatar :size="36" style="font-size: 400px; color:#ff943e; background: #fff;" class="iconfont-approval-admin"><span v-html="icons[NODE.APPROVE].icon"></span></a-avatar>
										</template>
										<template v-else-if="NODE.TRANSACT == node.nodeType">
											<a-avatar :size="36" style="font-size: 400px; color:#926bd5; background: #fff;" class="iconfont-approval-admin"><span v-html="icons[NODE.TRANSACT].icon"></span></a-avatar>
										</template>
										<template v-else>
											<flow-node-avatar :size="36" :id="node.auditor" :show-name="false" />
										</template>
									</div>
								</template>
								<div class="audit-record">
									<div class="avatar sgement">
										<div class="node-name">
											<template v-if="node.nodeType">{{ node.name }}</template>
											<template v-if="node.nodeType == NODE.START">{{ node.name}}</template>
										</div>
										<!-- 审批人姓名 -->
										<div class="auditor-name">
											<template v-if="node.userIds || node.roleIds">
												<div class="node-assignee">
													<flow-node-avatar v-for="userId in node.userIds" :size="20" :id="userId" class="assignee-item" />
													<flow-node-role-avatar v-for="roleId in node.roleIds" :size="20" :id="roleId" class="assignee-item" />
												</div>
											</template>
											<template v-else>
												<template v-if="node.nodeType == NODE.COPY">
													<!-- <div class="node-sign-assignee">抄送{{ node.userIds.length }}人</div> -->
													<div v-if="node.nodeType == NODE.COPY" class="node-assignee">
														<flow-node-avatar v-for="userId in node.userIds" :size="20" :id="userId" class="assignee-item" />
													</div>
												</template>
											</template>
										</div>
									</div>
								</div>
							</a-timeline-item>
						</template>
					</a-timeline>
				</div>
			</div>
		</template>
	</section>
</template>

<script setup>
import { computed, onMounted, ref, reactive, watch } from "vue";
import { useOrganStore } from "@/store/flowable";
import {  WIDGET, NODE } from "@/components/flowable/flow/common/FlowConstant";
import FlowApi from "@/api/flowable/FlowApi";
import OrganApi from "@/api/flowable/OrganApi";
import FlowNodeAvatar from "@/components/flowable/common/FlowNodeAvatar.vue";
import FlowNodeRoleAvatar from "@/components/flowable/common/FlowNodeRoleAvatar.vue";

let organStore = useOrganStore();
let { getUserById } = organStore;
let users = computed(() => organStore.users);
let props = defineProps({
	modelFlowInst: { type: Object, default: () => {} },
});
// 节点图标
let icons = reactive({});
icons[NODE.APPROVE] = { icon: "&#xe658" };
icons[NODE.COPY] = { icon: "&#xe656" };
icons[NODE.EXCLUSIVE_GATEWANY] = { icon: "&#xe63f" };
icons[NODE.TRANSACT] = { icon: "&#xe6cd" };
icons[NODE.TRIGGER] = { icon: "&#xe638;" };
icons[NODE.DELAY] = { icon: "&#xe630" };
let emits = defineEmits(["onRemove", "update:flowInst"]);

let flowInst = ref({});
let flowNodes = ref([]);
// 获取审批节点
const loadFlowDetail = () => {
	FlowApi.getFlowNodes({ flowInstId: flowInst.value.id }).then((resp) => {
		//console.log(flowInst)
		if (resp.code == 2000) {
			flowNodes.value = resp.data || [];
			//console.log(flowNodes);

		}
	});
};


watch(
	() => props.modelFlowInst,
	(nv) => {
		if (nv && nv.flowInstanceId) {
			FlowApi.getFlowInsts({ flowInstId: nv.flowInstanceId  }).then((resp) => {
				//console.log(nv);
				if (resp.code == 2000) {
					flowInst.value = resp.data || [];
					loadFlowDetail();
				}
			})
		}
	},
	{ immediate: true }
);

onMounted(() => {
	OrganApi.loadOrgan(); // 加载组织
});
</script>

<style lang="less" scoped>
@import "@/style/flowable/variables.module.less";
@bottomActionHeight: 52px;
@SidePadding: 20px;
@HeaderHeight: 40px;
@FormLabelWidth: 84px;

.flow-detail-container {
	height: 100%;
	overflow: hidden;
	position: relative;
	margin-top: 1%;
}

.flow-empty-detail-box {
	margin-top: 0px !important;
}

.flow-status-stamp {
	position: absolute;
	right: 30px;
	top: 30px;
}

.flow-header-box {
	font-weight: 400;
	font-size: 13px;
	border-bottom: 1px solid #e5e6ec;
	padding: 0 @SidePadding;
	height: calc(@HeaderHeight - 1px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #86909c;

	.action-area {
		.action-item {
			cursor: pointer;
			padding: 4px;
			border-radius: 4px;
			&:hover {
				background-color: #f2f3f5;
			}
		}
	}
}

.flow-detail-box {
	height: calc(100% - @bottomActionHeight - @HeaderHeight);
	overflow: hidden;
	overflow-y: auto;
	padding: 0 calc(@SidePadding + 10px);

	.header-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 20px;

		.summary-info {
			display: flex;
			align-items: center;

			.title {
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				color: #1d2129;
			}

			.status {
				margin-left: 20px;
			}
		}

		.initiator-info {
			display: flex;
			align-items: center;
			margin-top: 16px;

			.begin-time {
				margin-left: 20px;
				font-weight: 350;
				color: #86909c;
				font-size: 13px;
				user-select: none;
			}
		}
	}

	.flow-form-box {
		padding: 10px 0;

		.form-item {
			font-size: 14px;
			display: flex;

			+ .form-item {
				margin-top: 12px;
			}

			.label {
				color: #9ba5b3;
				width: @FormLabelWidth;
				white-space: nowrap;
				overflow: hidden;
				text-align: right;
				margin-right: 16px;
			}

			.value {
				color: #1d2129;
				display: flex;
				align-items: flex-start;
				// flex: 1;
				width: calc(100% - @FormLabelWidth - 16px);
				word-wrap: anywhere;
				word-break: break-all;
			}

			.detail-value {
				display: block;
			}

			.link {
				color: #1d2129;
				text-decoration: none;
				cursor: pointer;
				&:hover {
					color: #165cfd;
					text-decoration: underline;
				}
			}
		}

		.flow-inst-list {
			width: 100%;
			display: grid !important;
			grid-template-columns: repeat(auto-fit, @FlowCardWidth);
			gap: 6px;

			.flow-card-box {
				transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
				&:hover {
					box-shadow: 4px 4px 12px rgb(var(--gray-3));
				}
			}
		}

		.img-preview {
			display: flex;
			align-items: center;

			img {
				width: 40px;
				height: 40px;
				cursor: pointer;

				+ img {
					margin-left: 10px;
				}
			}
		}

		.attachment-box {
			width: 100%;

			.attachment-item {
				background-color: #f7f8fa;
				display: flex;
				align-items: center;
				cursor: pointer;
				padding: 8px 12px;
				border-radius: 4px;
				width: 100%;
				font-size: 13px;

				+ .attachment-item {
					margin-top: 4px;
				}
			}
		}

		.form-detail {
			margin-top: 8px;
			border: 1px dashed #e1e1e1;
			border-radius: var(--border-radius-small);

			.detail-title {
				color: var(--color-text-3);
				background-color: #f9fafa;
				padding: 2px;
			}

			.label {
				margin-top: 8px;
			}
		}
	}

	// 流程时间线相关样式
	.flow-box {
		user-select: none;

		// 流程头像
		.assignee-container {
			position: relative;

			.badge {
				@BadgeSize: 18px;
				@BadgeOffset: -4px;
				position: absolute;
				width: @BadgeSize;
				height: @BadgeSize;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: @BadgeOffset;
				right: @BadgeOffset;
				z-index: 999;
				border: 2px solid #fff;
				background-color: #fff;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.audit-record {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.sgement {
				margin-left: 8px;
				flex: 1;
			}

			.node-name {
				text-align: left;
				font-weight: 400;
				color: #86909c;

				.in-approval {
					color: #2a5eff;
				}
			}

			.auditor-name {
				font-size: 14px;

				.node-sign-type,
				.node-sign-assignee {
					font-weight: 400;
					color: #86909c;
					font-size: 12px;

					.node-sign-assignee-name {
						color: #2a5eff;
						display: inline-block;
					}
				}

				.node-assignee {
					margin-top: 4px;
					display: flex;
					flex-flow: row wrap;
					gap: 6px;
				}

				.assignee-name {
					color: #1d2129;
				}
			}

			.comment {
				user-select: none;
				margin: 4px 0 16px;
				padding: 8px 16px;
				border-radius: 4px;
				// background: #f2f4f5;
				background-color: #f8f8fa;

				.commnet-title {
					font-weight: 400;
					color: #a6aab1;
					font-size: 13px;
				}

				.comment-content {
					font-weight: 500;
					color: #1d2129;
				}

				.comment-attachment {
					gap: 10px;
					margin: 4px 0;
					display: flex;
					flex-wrap: wrap;

					.comment-attachment-item {
						border-radius: 4px;
						border: 1px solid #e1e1e1;
						padding: 4px 8px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 10px;

						.name {
							display: flex;
							align-items: center;
							gap: 4px;
						}

						.download-icon {
							display: flex;
							align-items: center;
							cursor: pointer;
							color: #165cfd;

							&:hover {
								opacity: 0.7;
							}
						}
					}
				}
			}

			.cmd {
				text-align: right;
			}
		}
	}
}

.documentDetail .flow-actions{
	position: fixed;
  bottom: 20px;
  right: 80px;
  width: 300px;
  height: 50px;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  z-index: 999;
}
</style>

<style lang="less">
.flow-detail-box {
	.arco-timeline-item {
		min-height: 108px;
	}

	.arco-timeline-item-dot-line {
		border-color: #98b7ff;
	}

	.arco-timeline-item-dot-content {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}

	.arco-timeline-item-content-wrapper {
		margin-left: 36px;
	}

	.arco-table-cell {
		padding: 6px;
		font-size: 13px;
		min-height: 30px;
	}
}

.arco-image-preview {
	.arco-image-preview-arrow {
		position: initial;
	}
}

.arco-dropdown-open .arco-icon-down {
	transform: rotate(180deg);
}

.flow-actions-box {
	.arco-dropdown {
		padding: 4px;
	}
}

.flow-exe-box {
	.modify-sign-group {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		width: 100%;

		.modify-sign-tip {
			color: var(--color-text-4);
		}
	}

	.action-attachment {
		.arco-upload-list-item {
			margin-top: 0;

			&:first-of-type {
				margin-top: 12px;
			}

			.arco-upload-list-item-content {
				padding: 4px 10px 4px 12px;
			}

			.arco-upload-list-item-operation {
				.arco-icon {
					font-size: 16px;
				}
			}
		}

		.arco-upload-hide + .arco-upload-list .arco-upload-list-item:first-of-type {
			margin-top: 0px;
		}
	}
}
</style>
